<template>
    <div class="m-sidebar">
        <div class="sidebar-left">
            <div class="logo-con">
                <img src="../../../static/images/logo.jpg" alt="">
            </div>
            <div class="nav">
                <div class="nav-item" :class="[(navData.navLevelFirst==item.id)?'active':'']" v-for="(item,index) in navData.navList" :key="index" @click="setCurrentNav(index,$event)"><i class='iconfont' :class="item.icon"></i>{{item.name}}</div>
            </div>
        </div>
        <div class="sidebar-right" v-if="navData.completeName != '概况'">
            <div class="title">{{navData.completeName}}</div>
            <div class="nav">
                <div class="nav-item" v-for="(item,index) in navData.navList[navData.navLevelFirstIndex].child" :key="index">
                    <router-link :to="item.link">{{item.name}}</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "m-sidebar",
    data() {
        return {
            
        };
    },
    props: {
      navData: {
        required: true,
        type: Object,
        default: {
          navList: [],
          navLevelFirst: 1,
          navLevelFirstIndex: 0,
          navLevelSecond: 11
        }
      }
    },
    methods: {
      //点击一级菜单时记录当前选中一级菜单序号
      setCurrentNav(index, el) {
        let vm = this;
        vm.$router.push({
          path: vm.navData.navList[index].child[0].link
        })
      }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
.m-sidebar{
    display: flex;
    .sidebar-left{
        width: 90px;
        height: 100vh;
        background: #444;
        .logo-con{
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width: 34px;
                height: 34px;
                border-radius: 50%;
            }
        }
        .nav{
            height: 38px;
            line-height: 38px;
            text-align: center;
            cursor: pointer;
            font-size: 14px;
            color: #cacaca;
            .nav-item{
                margin-bottom: 15px;
                .iconfont{
                    margin-right: 5px;
                    font-size: 14px;
                }
            }
            .active{
                background: #fff;
                color: #333;
            }
            .nav-item:hover{
                background: #fff;
                color: #333;
            }
        }
    }
    .sidebar-right{
        width: 110px;
        height: 100vh;
        background: #fff;
        .title{
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-bottom: 1px solid #E6E6E6;
            box-sizing: border-box;
        }
        .nav{
            display: flex;
            flex-direction: column;
            align-items: center;
            .nav-item{
                width: 90px;
                margin-top: 15px;
                text-align: center;
                color: #333;
                cursor: pointer;
                font-size: 14px;
                a{
                    width: 90px;
                    padding: 10px 0;
                    display: inline-block;
                    text-align: center;
                    cursor: pointer;
                    color: #333;
                    text-decoration: none;
                }
            }
            .nav-item a:hover, .nav-item a.router-link-active{
                background: #f8f8f8;
            }
        }
    }
}
</style>